<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>VUE 学习</title>
	</head>

	<body>
		<div id="app-2">
			<h1>基础入门（一）</h1>
			<!-- 
				这里示例为数据绑定: 将v-bind:title 与 message数据绑定
			-->
			<span v-bind:title="message">
				v-bind: 演示属性的双向绑定<br/>
    			鼠标悬停几秒钟查看此处动态绑定的提示信息！
  			</span>
  			<p v-if="seen"> 
  				v-if 演示的是条件判断<br/>
  				看到这段文本是因为 seen=true <br/>
  				在控制台中输入app2.seen=false 我将消失<br/>
  			</p>
  			<br />
  			
  			<p> 下面演示了两个循环绑定数据 
  				我们可以在控制台用 
  				app2.todos.push({text:"新加项目"})发现会增加一个项目
  				app2.todos.pop()发现会减少一个项目
  			</p>
  			<ol >
  				<li v-for="todo in todos">{{todo.text}}</li>
  			</ol>
  			
  			<ul >
				<li v-for=" product in products">{{product}}</li>
			</ul>
			
			<p>
				绑定一个事件到vue中, v-on:click 或其他事件	
			</p>
			<button v-on:click="reverseMessage">
				反转消息
				{{mytext}}				
			</button>
			
			<p>
				表单数据双向绑定	,结合事件可以改变input中的数据			
			</p>
			<input v-model="name" />
			
		</div>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script type="text/javascript">
		const app2 = new Vue({
			el: "#app-2",
			data: {
				products: [
					'Hello Vue Learning1',
					'Hello Vue Learning2',
				],
				todos:[
					{text:"学习vue.js"},
					{text:"学习vue全家桶"},
					{text:"来个vue 前端项目"},
				],
				message: "页面加载于 " + new Date().toLocaleString(),
				seen: true,
				mytext: "Hello Vue.js!",
				name: "tony"
			},
			methods:{
				reverseMessage: function(){
					//this.mytext = this.message.split('').reverse().join('');
					this.mytext = this.mytext.split('').reverse().join('')
					this.name = this.mytext;
				}
			}
		});
	</script>

</html>